<template>
  <div id="app">
    <van-nav-bar title="登录" class="page-nav-bar" >


    </van-nav-bar>
    <div class="article-detail">
     <div class="article-content-card">
      <div  class="login-btn">
        <img class="mobile-img" src="../../public/login.png" alt="" />
      </div>
      <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          left-icon="manager"
          placeholder="请输入用户名"
          :rules="userFormRules.userName"
        />
        <van-field
          v-model="password"
          type="password"
          left-icon="lock"
          name="密码"
          placeholder="请输入密码"
          :rules="userFormRules.passWord"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
        
      </div>

    </van-form>
    <div style="margin: 16px;">
        <van-button type="success"  round block  @click="   router.replace('/reg');">
          前往注册
        </van-button>
        
      </div>

</div>

  </div>

  </div>
</template>


<script>
import {reactive,toRefs,nextTick} from "vue";
import {Toast} from "vant";
import {login} from "../../api/user";
import router from "../../router";
import {useStore} from "vuex";
//1.构建登录请求
//获取用户输入内容

function useSubmit(user){
    const store=useStore();
    const onSubmit =async()=>{
        Toast.loading({
  message: '登录中...',
  forbidClick: true,
});
        const res =await login(user);
       
        if(res.data.code==20000){
     
            store.commit("setUser",res.data);
            Toast.success('用户登录成功！');
            
            nextTick(()=>{
            router.replace('/my');
          })
        }else{
            Toast.fail('用户名或密码错误！');
    
        }
    };

    const userFormRules={
        userName:[{required:true,message:"请输入用户名"}],
        passWord:[{required:true,message:"请输入密码"}]
    };
    return {
        onSubmit,
        userFormRules,
        router
    };
}


export default {

    
    setup(){
        const user=reactive({
            username:"",
            password:"",
            });

            return{
                ...toRefs(user),
                ...useSubmit(user),
            }

    }
};
</script>
<style>
.article-content-card {
  padding: 24px;
  background-color: #fff;
  border-radius: 0px;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
  margin-top: 10px;
}

.article-source-card {
  background-color: #3f64ca;
  color: #fff;
  padding: 8px 16px;
  border-radius: 16px;
  display: inline-block;
}

.article-time-card {
  margin-left: 16px;
  display: inline-block;
} 
.mobile-img {
      width: 132px;
      height: 132px;
      margin-bottom: 15px;
    }
.login-btn {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
</style>